<template>
  <div class="layout-wrapper">
    <div class="left" style="width: 200px; height: 300px; background-color: #f0f0f0;">
      <el-button v-buttonAuth="['admin']" @click="handleClickToA">跳转页面A</el-button>
      <el-button v-buttonAuth="['user']" @click="handleClickToB">跳转页面B</el-button>
      <el-button v-buttonAuth="['admin']" @click="handleClickToC">跳转页面C</el-button>
      <el-button v-buttonAuth="['admin']" @click="handleClickToE">跳转页面E</el-button>
      <el-button v-buttonAuth="['admin']" @click="handleClickToF">跳转页面F</el-button>
      <el-button v-buttonAuth="['admin']" @click="handleClickToG">跳转页面G</el-button>
    </div>
    <div class="rigth" style="width: 100%; height: 100%; background-color: lightcoral; overflow: auto;">
      <router-view></router-view>
    </div>
    <AITalk v-show="isShowTalk" class="ai-talk"></AITalk>
    <div class="talk-button" @click="handleShowTalk">
      <span>开始聊天</span>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import vButtonAuth from '@/directives/buttonAuth'
import { useRouter } from 'vue-router'
import AITalk from '@/views/AITalk.vue'

const router = useRouter()

const handleClickToA = () => {
  router.push({ name: 'PageA' })
}
const handleClickToB = () => {
  router.push({ name: 'PageB' })
}
const handleClickToC = () => {
  router.push({ name: 'PageC' })
}
const handleClickToE = () => {
  router.push({ name: 'PageE' })
}
const handleClickToF = () => {
  router.push({ name: 'PageF' })
}
const handleClickToG = () => {
  router.push({ name: 'PageG' })
}

const isShowTalk = ref(false)

const handleShowTalk = () => {
  isShowTalk.value = !isShowTalk.value
}
</script>
<style>
/** 还有个神奇的属性透传问题 用了scoped 还是有问题 保证最外层的元素名称不一致就能解决这个问题 */
.layout-wrapper{
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.ai-talk{
  position: absolute;
  right: 10px; 
  top: 10px; 
  z-index: 10; 
}
.talk-button{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
}
</style>